<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>首页</title>
        <!-- 小图标 -->
        <link href="/img/star.ico" rel="shortcut icon" type="image/x-icon">
        <!-- 使用了jquery -->
        <script src="/js/jquery-3.4.0.min.js"></script>
        <!-- bootstrap css文件 -->
        <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div class="container">
            <div class="col-xl-10 offset-1">
                <!-- 当前是同步提交, 使用token的时候, 需要让后端返回token, 所以要异步提交, 返回结果后处理 -->
                <form action="" id="login" method="post">
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="user"><strong>用户名: </strong></label>
                        <div class="col-xl-12">
                            <input id="user" class="form-control" name="username" placeholder="请输入用户名" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xl-2 control-label" for="pwd"><strong>密码: </strong></label>
                        <div class="col-xl-12">
                            <input id="pwd" class="form-control" name="password" placeholder="请输入密码" type="password">
                        </div>
                    </div>
                    <div class="form-group form-check" style="margin-left:15px;">
                        <input class="form-check-input" id="remember-me" type="checkbox" name="remember-me">
                        <label class="form-check-label" for="remember-me">记住我</label>
                    </div>

                    <div class="form-group" style="padding-left: 15px; padding-right: 15px;">
                        <input class="btn btn-block btn-warning" onclick="reset()" type="button" value="重置"/>
                        <input class="btn btn-block btn-success" type="button" onclick="login()" value="登录"/>
                    </div>
                </form>
            </div>
        </div>

        <script>
            function reset() {
                $("#user").val = "";
                $("#pwd").val = "";
            }

            /**
             * 登录系统
             */
            function login() {
                // 登录获取token, 写入localStorage, 以后每次请求都带上token
                $.ajax({
                    type: "post",
                    url: "/login",
                    dataType: "json",
                    data: {
                        "username": $("#user").val(),
                        "password": $("#pwd").val()
                    },
                    success: function (result) {
                        console.log(result)
                        // token直接从后端数据之中返回, 然后存入localStorage, 然后跳转到目标页面
                        localStorage.setItem("jwt-token", result.token)
                        // 控制跳转即可
                        // 01.前端控制跳转, 需要有权限信息
                        // window.location.href = "/hello"

                        // 02.为何/test.html被拦截, 而/scenery02放行了?
                        // window.location.href = "/test.html"
                        window.location.href = "/scenery02"

                        // 03.前端控制跳转, 需要有权限信息
                        // hello();
                    },
                    error: function (error) {
                        console.log(error.msg)
                    }
                });
            }

            function hello() {
                let token = localStorage.getItem("jwt-token")
                $.ajax({
                    type: "get",
                    url: "/hello",
                    headers: {
                        "Accept": "text/html; charset=utf-8",
                        "Content-Type": "text/plain; charset=utf-8",
                        "Authorization": token
                    },
                    success: function (result) {
                        console.log(result)
                    },
                    error: function (error) {
                        console.log(error.msg)
                    }
                });
            }
        </script>
    </body>
</html>